<template>
	<view class="acvbmict">
		<view class="">
		<van-search
		  :value="text"
		  placeholder="请输入搜索关键词"
		  use-action-slot
		   @change="onChange"
		  @search="onClick"
		>
		  <view slot="action" style="display: inline-block; margin-left: 20rpx;" @tap="onClick">搜索</view>
		</van-search>
		</view>
		<!-- 空白页 -->
		<view class="empty" v-if="list.length==0">
			<image src="https://xn-panda-test.oss-cn-hangzhou.aliyuncs.com/xiaochnegxu/cltynull.png" mode="aspectFit"></image>
			<view class="empty-tips">
		        暂无相关人员哦~~
			</view>
		</view>
		<!-- 列表 -->
		<view v-for="(item,index) in list" :key="list" class="acvtube">
			 <view>
			 	<image class="acvubin" @click="actione(index)" :src="item.avatarUrl" alt=""></image>
					<span class="caty-test">{{item.nick}}&nbsp;|&nbsp;{{fundeaster(item.type)}}</span>
					<van-button size="small" >免费咨询</van-button>
					<span class="caty-tianm" v-if="item.experienceLengthDesc != ''">{{item.experienceLengthDesc}}以上经验</span>  
			 </view>
				 <image class="caty-eimage" v-if="item.opusMainImages != null" :src="item.opusMainImages[0]" mode=""></image>
				 <image class="caty-eimage" v-if="item.opusMainImages != null" :src="item.opusMainImages[1]" mode=""></image>
				 <image class="caty-eimage" v-if="item.opusMainImages != null" :src="item.opusMainImages[2]" mode=""></image>
		</view>
		<van-action-sheet  
		   title="免费咨询的方式"
		   :show="show"
		   :actions="actions"
			cancel-text="取消"  
		/> 
	</view>
</template>

<script>
	import use from '@/http/user.js'
	import employeesConst from '@/employees/employees.js'
	const hireTypecon = {}
	employeesConst.hireTypecon.forEach((item) => {
	  hireTypecon[item.type] = item.value;
	});
	export default{
		data(){
			return{
				chateh:'',
				city:'',
				q:{
					index:1,
					size:20,
					searchText:'',
					region:{
						province:'',   // 省
						city:'',   // 市
						county:'',  // 区
					}
				},
				list:[],
				text:''
			}
		},
		onLoad(option){
			this.text = option.text
			this.q.searchText = option.text
			this.loadData()
		},
		methods:{
			async loadData(){
				this.chateh = wx.getStorageSync('chateh')
				this.city = wx.getStorageSync('city')
				if(this.city != ''){
					this.q.region.city = this.city
				} else{
					this.q.region = this.chateh
				}
				const res = await use.authenticati(this.q)
				this.list = res.data.data
			},
			// 跳转用户详细资料
			actione(index){
			    uni.navigateTo({ 
			    	url: `/pages/components/authentication?id=`+this.list[index].userId, 
			    })
			},
			fundeaster(code){
				return hireTypecon[code]
			},
			onChange(event){
				this.text = event.detail
				console.log(this.text)
			},
			// 搜索
			onClick(){
				this.q.searchText = this.text
				this.loadData()
			}
		}
	}
</script>

<style lang="scss">
	.acvbmict{
	   background-color: #f2f2f2;
	}
	.acvtube{
		position: relative;
		margin-left: 20upx;   
		margin-right: 20upx;
		padding-left: 15rpx;
		padding-top: 20rpx;
		margin-bottom: 20rpx;
		border-radius: 30rpx;
	    background-color: #fff;
	}
	.caty-test{
		display: inline-block; 
		margin-left: 26rpx;
		font-size: 28rpx;  
		width: 50%; 
		transform: translateY(-100%);
		margin-bottom: 10upx;
	}
	.caty-tianm{ 
		display: inline-block;
	    color: #939393;
		font-size: 24rpx;
		/* float: left; */
		width: 35%;
		transform: translateX(-130%); 
	} 
	.caty-eimage{
		display: inline-block; 
		width: 30%; 
		height: 220rpx;
		border-radius: 20px;
		margin-right: 3%;
	}
	
	.van-button--default{
		background-color: #ff7144 !important;
		border: 1px solid #ff7144 !important; 
		color: #fff !important;
		margin-right: 15rpx !important;
		margin-top: 10rpx !important;
		border-radius: 20px !important;
		position: absolute !important;
		top: 20rpx !important;
		right: 15rpx !important; 
	}
	.van-popup--safe{
		padding-bottom: 0 !important;
	}
	.ser-input{
		flex:1;
		height: 56upx;
		line-height: 56upx;
		width: 90%;
		margin-left: 30rpx;
		margin-top: 20rpx;
		text-align: center;
		font-size: 28upx;
		color:$font-color-base;
		border-radius: 20px;
		background: rgba(255,255,255,.6);
		border: 1px solid #ff7144;
		}
		.acvubin{
			width: 75upx;
			height: 75upx;
			border-radius: 50%;
		}
		.van-search{
			padding: 20rpx 40rpx !important;
		}
		 // 空白页 
			.empty{
					
				overflow: none;
			
				width: 100%;
				height: 100vh;
				padding-bottom:100upx;
				display:flex;
				justify-content: center;
				flex-direction: column;
				align-items:center;
				background: #fff;
				image{
					width: 240upx;
					height: 160upx;
					margin-bottom:30upx;
				}
				.empty-tips{
					display:flex;
					font-size: $font-sm+2upx;
					color: $font-color-disabled;
					.navigator{
						color: $uni-color-primary;
						margin-left: 16upx;
					}
					}
					}
</style>